import React,{useEffect} from 'react'
import { Button, Field, Form,Toast,NavBar  } from 'react-vant';
import axios from 'axios'
import './index.css'
import { useNavigate } from 'react-router-dom';
function $(docm){
  return typeof docm==='string' ? document.querySelector(docm) : ""
}
export default function Login() {
    const [form] = Form.useForm();
    const navigate=useNavigate()
    const onFinish = (values) => {
      axios.post('/api/login',values).then((req,res)=>{
        if (req.data.code===200) {
            Toast.info(req.data.msg)
            navigate('/zhut/home')
            localStorage.setItem('user',values.username)
            localStorage.setItem('token',req.data.token)
            localStorage.setItem('pasd',values.password)
        }
      })
    };
    const YW=()=>{
      $('.yw').style.display='none'
      $('.zw').style.display='block'
      $('.zdl').style.display='none'
      $('.ydl').style.display='block'
      $('.yyh').style.display='block'
      $('.zyh').style.display='none'
      $('.ymm').style.display='block'
      $('.zmm').style.display='none'
      $('.ytj').style.display='block'
      $('.ztj').style.display='none'
    }
    const ZW=()=>{
      $('.yw').style.display='block'
      $('.zw').style.display='none'
      $('.zdl').style.display='block'
      $('.ydl').style.display='none'
      $('.yyh').style.display='none'
      $('.zyh').style.display='block'
      $('.ymm').style.display='none'
      $('.zmm').style.display='block'
      $('.ytj').style.display='none'
      $('.ztj').style.display='block'
    }
 
  return (
    <div>
      <NavBar
      leftArrow={false}
      title={<div><span className='zdl'>登录</span><span className='ydl'>login</span></div>}
      rightText={<div>
        <div className='zw' onClick={()=>ZW()}>中文</div>
        <div className='yw' onClick={()=>YW()}>英文</div>
      </div>}
    />
      <Form
      form={form}
      showValidateMessage={false}
      onFinish={onFinish}
 
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType="submit" type="primary" block>
            <span className='ztj'>提交</span>
            <span className='ytj'>submitted</span>
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
        intro="确保这是唯一的用户名"
        rules={[{ required: true, message: '请填写用户名' }]}
        name="username"
        label={<div><span className='zyh'>用户名</span><span className='yyh'>username</span></div>}
      >
        <Field placeholder="请输入用户名" />  
      </Form.Item>
      <Form.Item rules={[{ required: true, message: '请填写密码' }]} name="password" label={<div><span className='zmm'>密码</span><span className='ymm'>password</span></div>}>
        <Field placeholder="请输入密码" />
      </Form.Item>
    </Form>
    </div>
  )
}
